<!-- Author:Rain -->

<template>
    <div id="main" class="inner">
        <div id="container" class="resume-container">
            <!-- 简历目录 -->
            <div class="resume-catalogue" v-show="!drawer">
                <div class="resume-catalogue-group">
                    <h2 class="catalogue-title main-title">简历目录</h2>
                    <ul class="catalogue-list">
                        <li @click="changeAside(0, 0, 0)" :style="active(0)" class="catalogue-item">
                            <span><a>个人信息</a></span>
                        </li>
                        <li @click="changeAside(0, 100, 1)" :style="active(1)" class="catalogue-item">
                            <span><a>个人优势</a></span>
                        </li>
                        <li @click="changeAside(0, 300, 2)" :style="active(2)" class="catalogue-item">
                            <span><a>期望职位</a></span>
                        </li>
                        <li @click="changeAside(0, 400, 3)" :style="active(3)" class="catalogue-item">
                            <span><a>工作/实习经历</a></span>
                        </li>
                        <li @click="changeAside(0, 600, 4)" :style="active(4)" class="catalogue-item active show-tip">
                            <span><a>项目经历</a></span>
                            <div class="catalogue-tip">可填写：学术科研经历、社会实践经历等</div>
                        </li>
                        <li @click="changeAside(0, 800, 5)" :style="active(5)" class="catalogue-item">
                            <span><a>教育经历</a></span>
                        </li>
                        <li @click="changeAside(0, 1000, 6)" :style="active(6)" class="catalogue-item">
                            <span><a>专业技能</a></span>
                        </li>
                    </ul>
                </div>
                <div class="resume-catalogue-group custom-add expand">
                    <h2 class="catalogue-title">自定义添加</h2>
                    <ul class="catalogue-list">
                        <li class="catalogue-item"><span class="max-ellipsis">资格证书</span><span
                                class="recommend-icon">推荐</span><i class="catalogue-icon"></i>
                            <div class="catalogue-tip">29%的前端/移动开发已上传</div>
                        </li>
                        <li class="catalogue-item"><span class="max-ellipsis">社团/组织经历</span><span
                                class="recommend-icon">推荐</span><i class="catalogue-icon"></i>
                            <div class="catalogue-tip">体现活动策划、团队管理等学习之外的能力</div>
                        </li>
                        <li class="catalogue-item"><span class="max-ellipsis">志愿者经历</span><i
                                class="catalogue-icon">所得税的收的</i>
                            <div class="catalogue-tip">展示你的志愿者精神</div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 简历内容 -->
            <div class="resume-content" :style="{ 'z-index': (drawer ? '20' : '0') }">
                <div class="resume-content-box">
                    <div class="resume-content-wrap">
                        <!-- 基础信息 -->
                        <div class="basic-info-box" :style="includesAct('基本信息') ? borderStyle : borderNone">
                            <div class="resume-section">
                                <div v-if="!Status.basic" class="resume-section-header">
                                    <div class="section-title">
                                        <div class="ant-card-meta">
                                            <div class="ant-card-meta-avatar">
                                                <div class="resume-edit-avatar"><span class="avatar-container"><span
                                                            class="ant-avatar ant-avatar-circle ant-avatar-image"
                                                            style="width: 80px; height: 80px; line-height: 80px; font-size: 18px;"><img
                                                                :src="profile"></span></span>
                                                    <!-- :src="todoPicPath(basicInfo?.profile||'')" -->

                                                    <!-- 这里可以放个小相机 -->
                                                    <div class="avatar-mask"><svg width="16" height="16"
                                                            viewBox="0 0 16 16" fill="none">
                                                            <path
                                                                d="M14.2856 3.28906H11.8571L11.2785 1.66763C11.2385 1.55668 11.1653 1.46078 11.0688 1.39302C10.9722 1.32526 10.8571 1.28896 10.7392 1.28906H5.26064C5.01957 1.28906 4.8035 1.44085 4.72314 1.66763L4.14279 3.28906H1.71422C0.92493 3.28906 0.285645 3.92835 0.285645 4.71763V12.8605C0.285645 13.6498 0.92493 14.2891 1.71422 14.2891H14.2856C15.0749 14.2891 15.7142 13.6498 15.7142 12.8605V4.71763C15.7142 3.92835 15.0749 3.28906 14.2856 3.28906ZM14.4285 12.8605C14.4285 12.9391 14.3642 13.0034 14.2856 13.0034H1.71422C1.63564 13.0034 1.57136 12.9391 1.57136 12.8605V4.71763C1.57136 4.63906 1.63564 4.57478 1.71422 4.57478H5.04814L5.3535 3.72121L5.76243 2.57478H10.2356L10.6446 3.72121L10.9499 4.57478H14.2856C14.3642 4.57478 14.4285 4.63906 14.4285 4.71763V12.8605ZM7.99993 5.71763C6.42136 5.71763 5.14279 6.99621 5.14279 8.57478C5.14279 10.1533 6.42136 11.4319 7.99993 11.4319C9.5785 11.4319 10.8571 10.1533 10.8571 8.57478C10.8571 6.99621 9.5785 5.71763 7.99993 5.71763ZM7.99993 10.2891C7.0535 10.2891 6.28565 9.52121 6.28565 8.57478C6.28565 7.62835 7.0535 6.86049 7.99993 6.86049C8.94636 6.86049 9.71422 7.62835 9.71422 8.57478C9.71422 9.52121 8.94636 10.2891 7.99993 10.2891Z"
                                                                fill="currentColor"></path>
                                                        </svg><span class="avatar-mask-text">上传头像</span></div>
                                                </div>
                                            </div>
                                            <div class="ant-card-meta-detail">
                                                <div class="ant-card-meta-title">{{ basicInfo.name }}</div>
                                                <div class="ant-card-meta-description">
                                                    <div class="basic-info-view">
                                                        <div class="basic-info-view-one"><span>
                                                                <img src="@\assets\icons\grass.svg">
                                                                {{ basicInfo.age }}</span><span>
                                                                <img src="@\assets\icons\handbag.svg">
                                                                {{ forjobInfo.identity }}</span><span>
                                                                <img src="@\assets\icons\address.svg">
                                                                {{ basicInfo.location }}</span><span>
                                                                <img src="@\assets\icons\clock.svg">
                                                                {{ statusArr[forjobInfo.status] }}</span></div>
                                                        <div class="basic-info-view-two"><span>
                                                                <img src="@\assets\icons\phone.svg">
                                                                {{ desensitizePhone(basicInfo.phone) }}</span><span>
                                                                <img src="@\assets\icons\envelope.svg">
                                                                {{ basicInfo.post }}
                                                            </span><span><span role="img" aria-label="wechat"
                                                                    class="anticon anticon-wechat">
                                                                    <img src="@\assets\icons\weixin.svg">
                                                                    {{ basicInfo.weixin }}
                                                                </span></span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="section-action">
                                        <div class="resume-view-action"><span @click="Status.basic = true"
                                                class="action-edit">编辑</span></div>
                                    </div>
                                </div>
                                <basic-edit :basicInfo="basicInfo" :forjobInfo="forjobInfo"
                                    @closeEdit="Status.basic = false" @submitEdit="Status.basic = false"
                                    v-else></basic-edit>
                            </div>
                        </div>
                        <!-- 个人优势 -->
                        <div id="adventage" :style="includesAct('优势亮点') ? borderStyle : borderNone"
                            class="self-assess-box">
                            <div class="resume-section">
                                <div v-show="!Status.advantage" class="resume-section-header">
                                    <div class="section-title">优势亮点</div>
                                    <div class="section-action">
                                        <div data-nick="resume-add-icon" class="resume-add-icon">
                                            <!-- 添加:其二取其一 -->
                                            <span v-if="true" @click="Status.advantage = true"
                                                class="action-edit">编辑</span>
                                            <img v-else src="@/assets/icons/add.svg" alt="添加项目">
                                        </div>
                                    </div>
                                </div>
                                <div v-show="!Status.advantage" class="resume-section-content">
                                    <div v-if="forjobInfo.advantage" class="self-assess-view-box">
                                        <p class="assess-content" v-html="XSS(TextToHTML(forjobInfo.advantage))">
                                        </p>
                                    </div>
                                    <div v-else class="empty-tip">编辑优势亮点，展示我的独特态度</div>
                                </div>
                                <!-- 编辑区 -->
                                <SelfAssessEdit :forjobInfo=forjobInfo @close="Status.advantage = false"
                                    v-if="Status.advantage" />
                            </div>
                        </div>
                        <!-- 求职期望 -->
                        <div id="posExp" :style="includesAct('求职期望') ? borderStyle : borderNone" class="resume-section"
                            style="margin-top: 16px;">
                            <div class="resume-section-header">
                                <div class="section-title">求职期望</div>
                                <div class="section-action">
                                    <div data-nick="resume-add-icon" class="resume-add-icon">
                                        <span @click="Status.jobWant = true" v-if="true" class="action-edit">编辑</span>
                                        <img v-else src="@/assets/icons/add.svg" alt="添加项目">
                                    </div>
                                </div>
                            </div>
                            <div v-show="!Status.jobWant" class="resume-section-content">
                                <div class="job-want-container">
                                    <div class="job-want-view-item">
                                        <div class="job-want-view-item-inner">
                                            <div class="item-header">
                                                <div class="item-title ellipsis-1">
                                                    <span class="job-title title-text">{{ forjobInfo.position }}</span>
                                                    <span class="title-text">|</span>
                                                    <span class="title-text">{{ salaryShow }}</span>
                                                    <span class="title-text">|</span>
                                                    <span class="title-text">{{ forjobInfo.city }}</span>
                                                    <span class="work-type-tag" v-show="forjobInfo?.forType">{{
                                                        forjobInfo.forType }}</span>
                                                </div>
                                                <div class="item-action">
                                                    <div class="resume-view-action"><span class="action-edit">编辑</span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- 编辑区 -->
                            <ExpectationsEdit :forjobInfo="forjobInfo" @closeEdit="Status.jobWant = false"
                                @submitEdit="Status.jobWant = false" v-show="Status.jobWant" />
                        </div>
                        <!-- 工作/实习经历 -->
                        <div id="workExp" :style="includesAct('工作经历') ? borderStyle : borderNone" class="resume-section"
                            style="margin-top: 16px;">
                            <div class="resume-section-header">
                                <div class="section-title">工作/实习经历</div>
                                <div class="section-action">
                                    <div @click="Status.WorkExp = true" class="resume-add-icon">
                                        <img src="@/assets/icons/add.svg" alt="添加项目">
                                    </div>
                                </div>
                            </div>
                            <div class="resume-section-content">
                                <div class="work-exp-container">
                                    <div v-for="item in forjobInfo.jobExperience" class="work-exp-view-item"
                                        :key="item.id">
                                        <div class="work-exp-view-item-inner">
                                            <div class="item-header">
                                                <div class="item-title ellipsis-1">{{ item.companyName }}</div>
                                                <div class="item-title-time">{{ item.timeStart }} ~ {{ item.timeEnd }}
                                                </div>
                                                <div class="item-action">
                                                    <div class="resume-view-action"><span
                                                            @click="deleteJobExById(item.id)"
                                                            class="action-delete">删除</span><span
                                                            class="action-space">/</span><span @click="linkData(item)"
                                                            class="action-edit">编辑</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-content">
                                                <div class="item-content-title">{{ item.jobName }}<span
                                                        class="item-content-work-type">{{ item.jobType }}</span></div>
                                                <p class="item-content-duty">{{ item.jobPerfor }}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- 提交成功上面就要重新渲染了！！！ -->
                                    <!-- 编辑区 -->
                                    <WorkExperience :refreshInfo="refreshInfo" @submitEdit="Status.WorkExp = false"
                                        v-if="Status.WorkExp" @closeEdit="Status.WorkExp = false" />
                                    <!-- 弹出编辑框 -->
                                    <el-dialog :close-on-click-modal="false" v-model="centerDialogVisible" title="编辑经历"
                                        width="600" align-center>
                                        <el-form :model="form" label-width="auto" style="max-width: 600px">
                                            <el-form-item label="职位名称">
                                                <el-input v-model="form.jobName" />
                                            </el-form-item>
                                            <el-form-item label="公司名称">
                                                <el-input v-model="form.companyName" />
                                            </el-form-item>
                                            <el-form-item label="在职时间">
                                                <el-col :span="11">
                                                    <el-date-picker value-format="YYYY-MM" v-model="form.time.start"
                                                        type="month" placeholder="Pick a date" style="width: 100%" />
                                                </el-col>
                                                <el-col :span="2" class="text-center">
                                                    <span class="text-gray-500">-</span>
                                                </el-col>
                                                <el-col :span="11">
                                                    <el-date-picker value-format="YYYY-MM" v-model="form.time.end"
                                                        type="month" placeholder="Pick a date" style="width: 100%" />
                                                </el-col>
                                            </el-form-item>
                                            <el-form-item label="工作类型">
                                                <el-radio-group v-model="form.jobType">
                                                    <el-radio label='社招/应届' value="社招/应届"
                                                        name="rainType">社招/应届</el-radio>
                                                    <el-radio label='实习' value="实习" name="rainType">实习</el-radio>
                                                </el-radio-group>
                                            </el-form-item>
                                            <el-form-item label="职责业绩">
                                                <el-input v-model="form.jobPerfor" type="textarea" />
                                            </el-form-item>
                                        </el-form>
                                        <template #footer>
                                            <div class="dialog-footer">
                                                <el-button @click="centerDialogVisible = false">Cancel</el-button>
                                                <el-button type="primary" @click="submitJobExp">
                                                    Confirm
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-dialog>
                                </div>
                            </div>
                        </div>
                        <!-- 项目经历 -->
                        <div id="projectExp" :style="includesAct('项目经验') ? borderStyle : borderNone"
                            class="resume-section" style="margin-top: 16px;">
                            <div class="resume-section-header">
                                <div class="section-title">项目经历</div>
                                <div class="section-action">
                                    <div @click="Status.projectExp = true" class="resume-add-icon">
                                        <img src="@/assets/icons/add.svg" alt="添加项目">
                                    </div>
                                </div>
                            </div>
                            <div class="resume-section-content">
                                <div class="project-exp-container">
                                    <!-- 项目循环开始的地方 -->
                                    <div v-for='item, index in forjobInfo.projectExperiences' :key="index"
                                        class="project-exp-view-item">
                                        <div class="project-exp-view-item-inner">
                                            <div class="item-header">
                                                <div class="item-title ellipsis-1">{{ item.projectName }}</div>
                                                <div class="item-title-time">{{ item.time.start }} ~ {{ item.time.end }}
                                                </div>
                                                <div class="item-action">
                                                    <div class="resume-view-action"><span
                                                            @click='delProjectExById(item.id)'
                                                            class="action-delete">删除</span><span
                                                            class="action-space">/</span><span @click="linkData2(item)"
                                                            class="action-edit">编辑</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="item-content">
                                                <div>{{ item.projectAddress }} · {{ item.projectDuty }}</div>
                                                <!-- 项目负责内容 -->
                                                <!-- 项目成果 -->
                                                <p>
                                                    <strong>项目描述</strong>{{ item.projectResponse }} <br>
                                                    <strong>项目成果</strong>{{ item.projectAchive }}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    <!--编辑区 -->
                                    <ProjectEdit :refreshInfo='refreshInfo' v-show="Status.projectExp"
                                        @closeEdit="Status.projectExp = false"
                                        @submitEdit='Status.projectExp = false' />
                                    <!-- 放表单项 -->
                                    <el-dialog :close-on-click-modal="false" v-model="centerDialogVisible2"
                                        title="编辑项目经历" width="600" align-center>
                                        <el-form :model="form2" label-width="auto" style="max-width: 600px">
                                            <el-form-item label="项目名称">
                                                <el-input v-model="form2.projectName" />
                                            </el-form-item>
                                            <el-form-item label="项目地址">
                                                <el-input v-model="form2.projectAddress" />
                                            </el-form-item>
                                            <el-form-item label="项目跨度">
                                                <el-col :span="11">
                                                    <el-date-picker value-format="YYYY-MM" v-model="form2.time.start"
                                                        type="month" placeholder="Pick a date" style="width: 100%" />
                                                </el-col>
                                                <el-col :span="2" class="text-center">
                                                    <span class="text-gray-500">-</span>
                                                </el-col>
                                                <el-col :span="11">
                                                    <el-date-picker value-format="YYYY-MM" v-model="form2.time.end"
                                                        type="month" placeholder="Pick a date" style="width: 100%" />
                                                </el-col>
                                            </el-form-item>
                                            <el-form-item label="项目职务">
                                                <el-input v-model="form2.projectDuty" />
                                            </el-form-item>
                                            <el-form-item label="项目描述">
                                                <el-input v-model="form2.projectDes" type="textarea" />
                                            </el-form-item>
                                            <el-form-item label="项目职责">
                                                <el-input v-model="form2.projectResponse" type="textarea" />
                                            </el-form-item>
                                            <el-form-item label="项目业绩">
                                                <el-input v-model="form2.projectAchive" type="textarea" />
                                            </el-form-item>
                                        </el-form>
                                        <template #footer>
                                            <div class="dialog-footer">
                                                <el-button @click="centerDialogVisible2 = false">Cancel</el-button>
                                                <el-button type="primary" @click="submitProExp">
                                                    Confirm
                                                </el-button>
                                            </div>
                                        </template>
                                    </el-dialog>
                                </div>
                            </div>
                        </div>
                        <!-- 教育经历 -->
                        <div id="eduExp" :style="includesAct('教育背景') ? borderStyle : borderNone" class="resume-section"
                            style="margin-top: 16px;">
                            <div class="resume-section-header">
                                <div class="section-title">教育经历</div>
                                <div class="section-action">
                                    <div data-nick="resume-add-icon" class="resume-add-icon">
                                        <!-- 添加:其二取其一 -->
                                        <span v-if="true" @click="Status.eduExp = true" class="action-edit">编辑</span>
                                        <img v-else src="@/assets/icons/add.svg" alt="添加项目">
                                    </div>
                                </div>
                            </div>
                            <div class="resume-section-content">
                                <div class="edu-exp-container">
                                    <div class="edu-exp-view-item">
                                        <div class="edu-exp-view-item-inner">
                                            <div class="edu-exp-view-left">
                                                <div class="edu-view-logo"><img
                                                        :src="$main.host+'/api/images/assets/学校.jpg'" alt="logo">
                                                </div>
                                                <div class="edu-view-content">
                                                    <div class="edu-name ellipsis-1">{{ educationInfo.school }}</div>
                                                    <div class="edu-time">{{ educationInfo.undergo.start }} ~
                                                        {{ educationInfo.undergo.end }}</div>
                                                    <p class="edu-tag"><span>{{ educationInfo.type }}</span></p>
                                                    <p class="edu-special ellipsis-1">{{ educationInfo.background }} |
                                                        {{ educationInfo.major }}</p>
                                                    <p>{{ educationInfo.experience }}</p>
                                                </div>
                                            </div>
                                            <div class="edu-exp-view-right">
                                                <div class="item-action">
                                                    <div class="resume-view-action"><span data-nick="resume-edit-icon"
                                                            class="action-edit">编辑</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- bianjiqu  -->
                                    <EduExpEdit :refreshInfo='refreshInfo' :educationInfo='educationInfo'
                                        @closeEdit="Status.eduExp = false" @submitEdit="Status.eduExp = false"
                                        v-show='Status.eduExp' />
                                </div>
                            </div>
                        </div>
                        <div id="skill" :style="includesAct('专业技能') ? borderStyle : borderNone" class="resume-section"
                            style="margin-top: 16px;">
                            <div class="resume-section-header">
                                <div class="section-title">专业技能</div>
                                <div class="section-action">
                                    <div data-nick="resume-add-icon" class="resume-add-icon"><svg viewBox="0 0 20 20"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
                                                <rect fill="#FF6400" opacity=".1" width="18" height="18" rx="9"></rect>
                                                <path stroke="#FF6400" stroke-width="2" stroke-linecap="round"
                                                    d="M9 6v6M6 9h6"></path>
                                            </g>
                                        </svg></div>
                                </div>
                            </div>
                            <div class="resume-section-content">
                                <div class="labels-container">
                                    <div class="resume-no"></div>
                                </div>
                            </div>
                        </div>
                        <div class="resume-section" style="margin-top: 16px;">
                            <div class="resume-section-header">
                                <div class="section-title">资格证书</div>
                                <div class="section-action">
                                    <div data-nick="resume-add-icon" class="resume-add-icon"><svg viewBox="0 0 20 20"
                                            xmlns="http://www.w3.org/2000/svg">
                                            <g transform="translate(1 1)" fill="none" fill-rule="evenodd">
                                                <rect fill="#FF6400" opacity=".1" width="18" height="18" rx="9"></rect>
                                                <path stroke="#FF6400" stroke-width="2" stroke-linecap="round"
                                                    d="M9 6v6M6 9h6"></path>
                                            </g>
                                        </svg></div>
                                </div>
                            </div>
                            <div class="resume-section-content">
                                <div class="credential-tags-container" id="credential">
                                    <div class="resume-no"></div>
                                </div>
                                <div class="labels-skill-box"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 简历侧边栏 -->
            <div class="user-sider">
                <div class="sider-box sider-resume clearfix">
                    <div class="resume-attachment">
                        <!-- 做AI评析 -->
                        <h1 class="title">AI智能诊断</h1>
                        <p class="tips">使用AI算法对你的简历进行分析</p>
                        <div class="todoItem">
                            <el-button @click="sendMsg(1)" type="primary" plain>简历分析</el-button>
                            <!-- 这边可以放点图片 -->
                        </div>
                        <div class="num">免费{{ aiDiagnosisTimes }}次<i class="white-line"></i></div>
                    </div>
                </div>
                <div class="sider-box sider-resume clearfix">
                    <div class="resume-attachment">
                        <!-- 做AI评析 -->
                        <h1 class="title">AI简历面试预测</h1>
                        <p class="tips">根据你当前的简历内容，AI算法预测面试官可能通过你的简历提问的面试问题</p>
                        <div class="todoItem">
                            <el-button @click="sendAI" type="primary" plain>面试预测</el-button>
                            <!-- 这边可以放点图片 -->

                        </div>
                    </div>
                    <div class="num">免费{{ aiDiagnosisTimes2 }}次<i class="white-line"></i></div>
                </div>

                <div class="sider-box sider-resume clearfix">
                    <div class="resume-attachment">
                        <!-- 做AI评析 -->
                        <h6 class="title">如何获取积分</h6>
                        <div class="todoItem">
                            <el-button style="width:220px" type="primary" plain>积分充值</el-button>

                            <!-- 这边可以放点图片 -->
                            <ul id="listAA">
                                <li><img style="width:23px"
                                        :src="$main.host + '/api/images/assets/%E7%AD%BE%E5%88%B0%E9%A2%86%E7%A7%AF%E5%88%86.svg'" />签到领积分
                                </li>
                                <li><img style="width:23px" :src="$main.host + '/api/images/assets/填写在线简历.svg'" />完成在线简历
                                </li>
                                <li><img style="width:23px"
                                        :src="$main.host + '/api/images/assets/邀请新用户得积分.svg'" />邀请新用户得积分
                                </li>
                                <li><img style="width:23px" :src="$main.host + '/api/images/assets/竞赛答题拿积分.svg'" />竞赛答题拿积分
                                </li>
                                <li><img style="width:23px" :src="$main.host + '/api/images/assets/分享面试经验.svg'" />分享面试经历
                                </li>
                                <li><img style="width:23px"
                                        :src="$main.host + '/api/images/assets/查看会员权益得积分.svg'" />查看会员权益
                                </li>
                                <li><img style="width:23px" :src="$main.host + '/api/images/assets/劳动合同查看.svg'" />劳动合同查看
                                </li>
                                <li><img style="width:23px"
                                        :src="$main.host + '/api/images/assets/完成调查问卷送积分.svg'" />完成调查问卷
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 放第一个人工智能的抽屉 -->
    <el-drawer v-model="drawer" :modal="false" :title="title" :lock-scroll="false" :with-header="true" :z-index="10">
        <div class="circle-wrap">
            <el-progress :format="(num: any) => num + ''" type="circle" :percentage="percentage" />
            <h3>你的简历综合评分</h3>
            <p>在仔细检查一下，简历还有能优化的地方哦</p>
            <el-button type="primary" @click="sendMsg(1)" plain>重新诊断</el-button>
        </div>
        <div class="result-wrap">
            <div class="resHeader">
                <div class="paiban">
                    <span>智能优化建议</span>
                    <span>共{{ loading ? '?' : Object.values(resumeAIData).flat(1).length }}条</span>
                </div>
            </div>
            <!-- 这里关于包装结果的！！ -->
            <el-collapse v-loading="loading" element-loading-text="AI正在分析您的简历..." v-model="activeNames"
                @change="handleChange">
                <el-collapse-item v-for="item, key in resumeAIData" :key='key' :title='key' :name="key + ''">
                    <template v-if='item.length != 0' #title>
                        <el-badge :value="item.length">
                            {{ key }}
                        </el-badge>
                    </template>
                    <div v-for='list, i in item' :key='i'>
                        <p style='background:rgba(0,0,0,.1);padding:3px 10px;margin-bottom:10px;border-radius:5px'>问题：{{
                            list['问题'] }}<br>建议：{{ list['建议'] }}</p>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
        <!-- 这里可以写样式 -->
        <p v-html="showRes"></p>
    </el-drawer>


    <el-drawer v-model="drawer1" :modal="false" title="AI简历面试预测" :lock-scroll="false" :with-header="true" :z-index="10">
        <p v-html="showRes"></p>
    </el-drawer>

</template>

<script setup lang="ts">
import { BasicEdit, SelfAssessEdit, ExpectationsEdit, WorkExperience, ProjectEdit, EduExpEdit } from "./index"
import { desensitizePhone, TextToHTML, XSS, todoPicPath, slideTo } from "@/utils/todo"
import { deleteWorkExperience, updateWorkExperience, deleteProjectExperience, updateProjectExperience } from "@/api/user/index"
import AI from "@/hooks/AI"
import { useStorage } from "@vueuse/core";
import { useUserStore } from "@/store/modules/user"
import { fontWeight } from "html2canvas/dist/types/css/property-descriptors/font-weight";
const { showRes, text, send } = AI()
const userStore = useUserStore()
//监听仓库的变化
userStore.$subscribe((mutation, state) => {
    profile.value = todoPicPath(state.user.basicInfo.profile)
})

// 本地存储维持状态
//编辑状态
//下面这几个编辑状态应该放进本地存储
const Status = useStorage("editStatus", {
    basic: false,
    advantage: false,
    jobWant: false,
    WorkExp: false,
    projectExp: false,
    eduExp: false
})

// 状态管理库中获取数据
const { basicInfo, educationInfo, forjobInfo } = userStore.user;
//头像单独领出来
const profile = ref(todoPicPath(basicInfo.profile));
const { aiDiagnosisTimes, aiDiagnosisTimes2 } = toRefs(userStore)
const statusArr = [`离校，正在找工作`, `在校，可即可到岗`, `在校，看看机会`, `在校，暂时不找工作`]



//计算一下薪资结构展示
let salaryShow = computed(() => {
    // console.log(forjobInfo);

    let salary = forjobInfo.salary
    let forType = forjobInfo.forType
    if (forType == '实习') {
        return `${salary.dsalaryMin}-${salary.dsalaryMax}`
    } else if (forType == '社招/应届') {
        return `${salary.msalaryMin}-${salary.msalaryMax} * ${salary.numMouth}`
    }
})



//异步请求数据，并关闭编辑
function refreshInfo() {
    Status.value.basic = false
    //重新请求页面数据刷新
    userStore.getUserInfo().then(val => {
        Object.assign(basicInfo, val.data.basicInfo)
        Object.assign(educationInfo, val.data.educationInfo)
        Object.assign(forjobInfo, val.data.forjobInfo)
    });
}

// 🍇
const txt = `
基本信息：
1318081 丨luoyu*3467……##@*@#&*3@outlook.com 丨长沙
220岁 丨湖南省衡阳市 丨共青团员
在校生 丨web前端

优势亮点：
我非常喜欢搞前端技术，感觉他很有趣的。在学校里面我也经常做组长，完成了一些项目


专业技能：
熟悉JavaScript、HTML、CSS，掌握ES6及以上特性。
熟练使用Vue进行项目开发，了解虚拟DOM原理 和 数据绑定原理。
计算机基础扎实，了解TCP/HTTP的基本原理，了解Web安全相关知识。
熟悉git基本的合作开发流程。
了解浏览器的基本原理、缓存等知识。
对webpack、性能优化有一定的了解。
使用过Java、Node做后端开发，了解前后端的整个基础开发流程。

项目经验：
基于大模型的大学生就业能力评价和职位推荐系统
负责人
2023年01月 - 2024年03月
项目描述：项目基于大模型实现一套大学生就业能力评价和智能岗位推荐系统。
负责内容：
选用axios与后端进行对接，用pinia实现数据管理并于前端渲染，应用阿里iconfont和Element Plus、D3等实现前端良好的用户交互体
验。
前端Vue项目SPA基础架构的搭建和通用组件的封装，负责实施团队开发流程管理和规范项目编码。
知识图谱可视化解决方案与技术选型，结合项目功能点考虑了Echarts和D3，通过技术实现和需求分析，选用D3做知识图谱可视化，
Echarts做其他的简单数据信息展示模块。
通过JS处理调用星火大模型API，实现岗位描述、求职者技能等需要npl信息处理的关键字的提取。
项目难点：
选用D3做知识图谱可视化基础架构需考虑到功能点实现和用户体验，实现起来需要大量的SVG、d3的等基础知识。
项目是一个客户端两种角色需做权限分离的项目，做好权限分离，需要考虑路由权限、接口权限、角色切换的状态管理等等。
小雨云听音乐平台
负责人
2023年07月 - 2023年11月
项目描述：该应用依托成熟的互联网技术，以优质音乐内容为核心，为用户提供多元化的音乐生活体验。
负责内容：
Vue2项目，ElementUI+axios+vuex实现前端音乐播放，音乐视听效果呈现，歌单及歌曲评论区等界面开发。
Java后端采用springboot框架开发接口。
实现全局背景样式的切换功能和自定义。
项目难点：
实现歌词随着音乐播放滚动效果和评论区信息状态的展示

教育背景：
湖南中医药大学
信息管理与信息系统 本科 信息科学与工程学院
2021年09月 - 2025年06月
长沙
主修课程：Web应用技术、计算机网络原理、信息安全、JavaEE、数据结构与算法、软件工程等

`
// 根据我的简历信息，面试官接下啦/会问我些什么问题？分条列点

//抽屉
let title = ref("")
const drawer = ref(false)
// sendMsgs 是AI简历分析
function sendMsg(type: number) {
    if (aiDiagnosisTimes.value <= 0) {
        ElMessage({
            message: "免费次数已用完，请充值~",
            type: 'error',
        })
        return
    }
    aiDiagnosisTimes.value--;
    //这里我们只要根据传过来的值，进行相应字符串的更改！！！
    title.value = type == 1 ? 'AI智能诊断' : 'AI简历面试预测'
    loading.value = true
    text.value = txt+`根据上面的基本信息、优势亮点、专业技能、项目经验、教育背景等，依次分析一下有哪些问题，有问题如何改善？注意按这几个主题分条列点哈。`
    // console.log(loading.value)
    drawer.value = true
    send()
}


//下面一个弹框，没有考虑复用
const drawer1 = ref(false)
function sendAI() {
    //弹出侧边栏
    if (aiDiagnosisTimes2.value <= 0) {
        ElMessage({
            message: "免费次数已用完，请充值~",
            type: 'error',
        })
        return
    }
    aiDiagnosisTimes2.value--;
    drawer1.value = true
    text.value ='🍇'+ txt+`根据我的简历信息，面试官接下啦/会问我些什么问题？分条列点`
    console.log(text.value);


    send()
}



//根据ID删除求职者工作或者实习经历
function deleteJobExById(id: any) {
    deleteWorkExperience(id + '').then(val => {
        let { data } = val
        if (data.code == 200) {
            //成功！！！
            ElMessage({
                message: "数据更新成功~",
                type: 'success',
            })
            refreshInfo()
        } else {
            ElMessage({
                message: "数据更新失败！",
                type: 'error',
            })
        }
    }).catch(err => {
        console.log(err);
        ElMessage({
            message: "数据更新失败！",
            type: 'error',
        })
    })
}
// 关于编辑求职者这边的工作实习经历，不太像做了！！
// 编辑弹出来的编辑界面！！！
const centerDialogVisible = ref(false)
const form = reactive({
    companyName: '字节跳动',
    id: '1',
    jobName: 'web前端开发',
    jobType: '实习',
    jobPerfor: '在公司干了两个月的前端可视化开发！！！',
    time: {
        start: "2024-6",
        end: '2024-12'
    }
})
//链接数据
function linkData(item: any) {
    //同时打开编辑框
    centerDialogVisible.value = true
    //链接数据，id
    Object.assign(form, item)
}
function submitJobExp() {
    //我觉得应该要带一个id吧

    updateWorkExperience(form).then(val => {
        let { data } = val
        if (data.code == 200) {
            //成功！！！
            ElMessage({
                message: "数据更新成功~",
                type: 'success',
            })
            refreshInfo()
        } else {
            ElMessage({
                message: "数据更新失败！",
                type: 'error',
            })
        }
    }).catch(err => {
        console.log(err)
        ElMessage({
            message: "数据更新失败！",
            type: 'error',
        })
    })

    //关闭编辑框
    centerDialogVisible.value = false
}


//删除项目经历
function delProjectExById(id: string) {
    deleteProjectExperience(id + '').then(val => {
        let { data } = val
        if (data.code == 200) {
            //成功！！！
            ElMessage({
                message: "数据更新成功~",
                type: 'success',
            })
            refreshInfo()
        } else {
            ElMessage({
                message: "数据更新失败！",
                type: 'error',
            })
        }
    }).catch(err => {
        console.log(err);
        ElMessage({
            message: "数据更新失败！",
            type: 'error',
        })
    })
}
//这里进行编辑还是换一个表单项吧！！！
const centerDialogVisible2 = ref(false)
const form2 = reactive({
    projectName: '',//项目名称
    projectAddress: '',//项目地址
    time: {
        start: '2023-2',
        end: '20230-9'
    },
    projectDuty: '',//项目职务
    projectDes: "",//项目描述
    projectResponse: '',//项目职责
    projectAchive: "",//项目业绩
    id: '1'
})
//链接数据
function linkData2(item: any) {
    centerDialogVisible2.value = true
    Object.assign(form2, item)
}
function submitProExp() {
    updateProjectExperience(form2).then(val => {
        let { data } = val
        if (data.code == 200) {
            //成功！！！
            ElMessage({
                message: "数据更新成功~",
                type: 'success',
            })
            refreshInfo()
        } else {
            ElMessage({
                message: "数据更新失败！",
                type: 'error',
            })
        }
    }).catch(err => {
        console.log(err)
        ElMessage({
            message: "数据更新失败！",
            type: 'error',
        })
    })
    //关闭编辑框
    centerDialogVisible2.value = false
}

/* 教育经历 */


//判断是否选中
function includesAct(index: string) {
    const arr = toRaw(activeNames.value)
    return arr.includes(index)
}
let percentage = ref(0)
let resumeAIData = reactive({
    "专业技能": [],
    "优势亮点": [],
    "基本信息": [],
    "教育背景": [],
    "项目经验": []
})
userStore.$subscribe((mutation, state) => {
    if (state.ttsWS === 'close') {
        userStore.ttsWS = "sdsd"

        loading.value = false
        //这里其实数据也已经有了！！
        Object.assign(resumeAIData, state.resumeResult)
        percentage.value = state.resumeResult.score
        delete resumeAIData.score//删除多余的
    }
})
const loading = ref(false)
const activeNames = ref([])
const handleChange = (val: string[]) => {
    console.log(val)
}
/* 设置内联样式 */
const borderStyle = {
    boxShadow: "rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px",
    margin: '20px 10px',
    transition: 'all 0.5s'
}
const borderNone = {
    boxShadow: '',
    margin: '0',
    transition: 'all 0.5s'
}

const fontStyle = {
    fontSize: '15px',
    fontWeight: 800,
}
function active(index: number) {
    return selectIndex.value == index ? fontStyle : ''
}
const selectIndex = ref(-1)
function changeAside(x: number, y: number, index: number) {
    slideTo(x, y);
    selectIndex.value = index;
}

</script>

<style scoped>
#listAA {
    display: flex;
    flex-direction: column;
    padding: 20px;
}

#listAA img {
    margin-right: 20px;
    position: relative;
    top: 8px;
}

#listAA li {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 10px;
    color: rgba(0, 0, 0, .6);
    border: 1px RGB(145, 96, 168) dashed;
    border-radius: 10px;
    padding: 4px 0;
    padding-left: 10px;
}

/* 侧边栏之AI */
.resume-attachment .title {
    font-family: 'Times New Roman', Times, serif;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 20px;
}

.resume-attachment .tips {
    color: rgba(99, 98, 98, .5);
}

/* 人工智能抽屉中的样式 */
.circle-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.circle-wrap h3 {
    margin: 20px 0;
    font-size: 26px;
}

.circle-wrap p {
    color: rgba(0, 0, 0, 0.5);
    padding: 10px;
}

.result-wrap {
    padding-top: 60px;

}

.result-wrap .resHeader .paiban {
    display: flex;
    justify-content: space-between;
}

/* 更改Element样式 */
>>>.el-badge__content.is-fixed {
    top: 23px;
    right: -20px;
}

#main {
    min-height: calc(100vh - 300px);
}

.inner {
    width: 1184px;
    margin: 0 auto;
}

.inner:after {
    content: "";
    display: block;
    clear: both;
    overflow: hidden;
}

#container {
    position: relative;
    /* 这里算是嵌入了一些样式！！！ */
    background: url(https://static.shiyanlou.com/lanqiao/frontend/dist/img/page-bg.50c13e0.png) no-repeat;
    background-size: 100% auto;
    width: 100%;
}

.resume-container {
    display: flex;
    align-items: start;
    padding-top: 20px;
}

/* 简历目录 */
.resume-container.is-fixed .resume-catalogue,
.resume-container.is-fixed .resume-diagnose {
    position: sticky;
    top: 60px;
    z-index: 20;
}

.resume-catalogue {
    width: 160px;
    position: sticky;
    top: 10px;
    z-index: 20;
}

.resume-catalogue-group:first-child {
    border-top-right-radius: 16px;
    border-top-left-radius: 16px;
}

.resume-catalogue-group {
    background-color: #fff;
}

.resume-catalogue .catalogue-title.main-title {
    padding: 12px 20px;
    color: #222;
    font-weight: 600;
    background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
    border-radius: 16px 16px 0 0;
    display: block;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
}

.resume-catalogue .catalogue-list {
    padding: 4px;
}

.resume-catalogue .catalogue-list .catalogue-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    line-height: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: all .2s linear;
    color: #333;
}

.resume-catalogue-group.custom-add {
    position: relative;
    padding: 0 4px 4px;
}

.resume-catalogue-group:last-child {
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
}

.resume-catalogue-group {
    background-color: #fff;
}

.resume-catalogue-group.custom-add:before {
    content: " ";
    position: absolute;
    height: 1px;
    left: 4px;
    right: 4px;
    top: 0;
    z-index: 1;
    background: #ededed;
}

.resume-catalogue-group.custom-add .catalogue-title {
    display: block;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    font-weight: 400;
    position: relative;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 0 0 4px 4px;
}

.resume-catalogue-group.custom-add .catalogue-title:after {
    content: " ";
    position: absolute;
    top: 12px;
    right: 12px;
    width: 16px;
    height: 16px;
    background: url(https://img.bosszhipin.com/static/file/2023/5631ion4w21695644855776.png) 0 0/16px auto no-repeat;
    transition: opacity .2s linear;
    z-index: 1;
    transform: rotate(-90deg);
}

.resume-catalogue-group.custom-add.expand .catalogue-title:after {
    transform: none;
}

.resume-catalogue-group.custom-add .catalogue-list {
    padding: 0;
}

.resume-catalogue .catalogue-list .catalogue-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 16px;
    line-height: 20px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.05s linear;
    color: #333;
}

.resume-catalogue .catalogue-list .catalogue-item:hover {
    background-color: #BCC4CF66;
    font-size: 15px;
}

.resume-catalogue-group.custom-add .catalogue-list .catalogue-item {
    padding: 10px 28px;
    overflow: hidden;
}

.resume-catalogue .max-ellipsis {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 86px;
    white-space: nowrap;
}

.resume-catalogue-group.custom-add .catalogue-list .recommend-icon {
    position: absolute;
    top: 12px;
    right: 10px;
    font-size: 12px;
    font-weight: 400;
    color: purple;
    line-height: 12px;
    padding: 2px 4px;
    background: rgba(127, 120, 228, 0.2);
    border-radius: 4px;
    z-index: 1;
}

.resume-catalogue-group.custom-add .catalogue-list .catalogue-icon {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 16px;
    height: 16px;
    background: url(https://img.bosszhipin.com/static/file/2023/5631ion4w21695644855776.png) 0 -32px/16px auto no-repeat;
    transition: opacity .2s linear;
    z-index: 1;
}

.resume-catalogue .catalogue-tip {
    position: absolute;
    top: 3px;
    left: calc(100% + 4px);
    border-radius: 2px;
    color: #fff;
    background: #333;
    white-space: nowrap;
    align-items: center;
    font-size: 12px;
    line-height: 18px;
    padding: 8px 12px;
    z-index: 99;
    display: none;
}

span:hover+.catalogue-tip {
    display: block;
}



/* 简历内容 */
.resume-content {
    flex: 1;
    position: relative;
    margin-right: 16px;
    margin-left: 16px;
    margin-bottom: 30px;
}

.resume-content .resume-content-box {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 -1px 8px rgba(0, 0, 0, .03);
}



/* 下面是另一个内容的---猎聘 */
.resume-content-wrap {
    width: 100%;
    /* float: left;
    position: relative;
    z-index: 99; */
    padding-bottom: 60px;
    border-radius: 16px;
}

.basic-info-box {
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background: #fff;
}

.basic-info-box .empty-box {
    display: none;
}

.resume-section {
    border-radius: 16px;
    background: #fff;
}

.resume-section-header {
    position: relative;
    padding: 28px 32px 0;
    overflow: hidden;
}

.resume-section-header .section-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    color: #07132b;
}

.ant-card-meta {
    margin: -4px 0;
}

.ant-card-meta:before {
    display: table;
    content: "";
}

.ant-card-meta:after {
    clear: both;
    display: table;
    content: "";
}

.ant-card-meta-avatar {
    float: left;
    padding-right: 16px;
}

.basic-info-box .resume-edit-avatar {
    position: relative;
    cursor: pointer;
}

.avatar-container {
    display: inline-block;
    position: relative;
}

.ant-avatar-image {
    background: transparent;
}

.ant-avatar {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
}

.ant-avatar>img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.basic-info-box .resume-edit-avatar .avatar-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .45);
    color: #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
}

svg:not(:root) {
    overflow: hidden;
}

.basic-info-box .resume-edit-avatar .avatar-mask-text {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 400;
    line-height: 17px;
}

/* 列表详细 */
.ant-card-meta-detail {
    overflow: hidden;
}

.ant-card-meta-title {
    overflow: hidden;
    color: #07132b;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.basic-info-box .ant-card-meta-title {
    font-size: 20px;
    font-weight: 700;
}

.ant-card-meta-detail>div:not(:last-child) {
    margin-bottom: 8px;
}

.ant-card-meta-description {
    color: #666;
}

.basic-info-box .basic-info-view {
    font-size: 14px;
    font-weight: 400;
    color: #07132b;
}

.basic-info-box .basic-info-view .basic-info-view-one {
    margin-bottom: 11px;
}

.basic-info-box .basic-info-view .basic-info-view-one span:first-child,
.basic-info-box .basic-info-view .basic-info-view-two span:first-child {
    margin-left: 0;
}

.basic-info-box .basic-info-view .basic-info-view-one span,
.basic-info-box .basic-info-view .basic-info-view-two span {
    margin-left: 24px;
}

.basic-info-box .basic-info-view .basic-info-view-one span svg,
.basic-info-box .basic-info-view .basic-info-view-two span svg {
    margin-right: 4px;
    vertical-align: middle;
}

.resume-section-header .section-action {
    position: absolute;
    top: 28px;
    right: 32px;
}

.resume-view-action {
    width: 90px;
    text-align: right;
}

.resume-view-action>* {
    line-height: 20px;
    font-size: 14px;
    color: #ff6400;
}

.resume-view-action .action-edit {
    cursor: pointer;
}

/* 优势亮点 */
.self-assess-box {
    padding-bottom: 24px;
    background: #fff;
    border-radius: 4px;
}

.self-assess-box .empty-tip {
    padding: 16px 32px 8px;
    font-size: 14px;
    color: #ccc;
}

.resume-add-icon {
    height: 100%;
    line-height: 100%;
    color: #ff6400;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
}

.resume-add-icon img,
.resume-add-icon svg {
    width: 21px;
    height: 21px;
}

.self-assess-view-box {
    padding: 8px 0 10px;
}

.self-assess-view-box .assess-content {
    padding: 8px 16px;
    margin: 0 16px;
    border-radius: 8px;
    word-break: break-word;
    white-space: pre-wrap;
    font-size: 14px;
    color: #000;
}


/* 求职期望 */
.job-want-container {
    padding: 8px 0 20px;
}

.job-want-view-item {
    padding: 16px 32px;
}

.job-want-view-item .item-header {
    display: flex;
    height: 26px;
    line-height: 22px;
    overflow: hidden;
}

.job-want-view-item .item-header .item-title {
    display: flex;
    font-size: 12px;
    font-weight: 700;
    flex: 1;
}

.ellipsis-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-want-view-item .item-header .item-title .job-title {
    font-size: 14px;
    color: #07132b;
    margin-left: 0;
    font-weight: 700;
}

.job-want-view-item .item-header .item-title .flex-names,
.job-want-view-item .item-header .item-title .title-text {
    font-weight: 400;
    margin-left: 17px;
    font-size: 14px;
    color: #000;
}

.job-want-view-item .item-header .item-title .work-type-tag {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 8px;
    height: 22px;
    background: #fff4e6;
    border-radius: 11px;
    color: #ffae00;
    border: 1px solid #ffbd7a;
    margin-left: 24px;
}

.job-want-view-item .item-header .item-action {
    display: none;
}

.resume-view-action {
    width: 90px;
    text-align: right;
}

/* 工作/实习经历 */
.work-exp-container {
    padding: 8px 0 24px;
}

.work-exp-view-item {
    padding: 16px 32px;
}

/* 手动效果------ */
.work-exp-view-item .work-exp-view-item-inner {
    padding: 8px 16px;
    border-radius: 10px;
}

.work-exp-view-item .work-exp-view-item-inner:hover {
    background-color: RGB(225, 229, 234);
}

.work-exp-view-item .work-exp-view-item-inner:hover .item-header .item-action {
    display: block;
}

.work-exp-view-item .item-header {
    height: 20px;
    line-height: 20px;
    position: relative;
}

.work-exp-view-item .item-header .item-title {
    font-size: 14px;
    color: #07132b;
    line-height: 20px;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    max-width: 500px;
}

.work-exp-view-item .item-header .item-title-time {
    color: #666;
    font-size: 12px;
    font-weight: 400;
    margin-left: 16px;
    display: inline-block;
}

/* hover状态 */
.item-header .item-action {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
}

.resume-view-action {
    width: 90px;
    text-align: right;
}

.resume-view-action>* {
    line-height: 20px;
    font-size: 14px;
    color: #ff6400;
}

.resume-view-action .action-delete {
    cursor: pointer;
}

.resume-view-action .action-space {
    margin: 0 8px;
    color: #ccc;
}

.resume-view-action .action-edit {
    cursor: pointer;
}

.work-exp-view-item .item-content-title {
    display: flex;
    align-items: center;
    margin-top: 8px;
    line-height: 18px;
    font-size: 13px;
    color: #07132b;
}

.work-exp-view-item .item-content-title .item-content-work-type {
    margin-left: 8px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 18px;
    border-radius: 4px;
    color: #0084ff;
    background: rgba(0, 132, 255, .08);
}

.work-exp-view-item .item-content-duty {
    color: #000;
    font-size: 14px;
    white-space: break-spaces;
    white-space: pre-wrap;
    word-break: break-word;
    margin-top: 12px;
    margin-bottom: 0;
}

/* 项目经历 */
.project-exp-container {
    padding: 8px 0 16px;
}

.project-exp-view-item {
    padding: 16px 32px;
}

.project-exp-view-item .item-header {
    height: 20px;
    line-height: 20px;
    position: relative;
}

.project-exp-view-item .item-header .item-title {
    font-size: 14px;
    color: #07132b;
    line-height: 20px;
    font-weight: 700;
    display: inline-block;
    vertical-align: middle;
    max-width: 500px;
}

.project-exp-view-item .item-header .item-title-time {
    color: #666;
    font-size: 12px;
    font-weight: 400;
    margin-left: 16px;
    display: inline-block;
}

.project-exp-view-item .item-content div {
    margin-top: 8px;
    line-height: 18px;
    font-size: 13px;
    word-break: break-word;
    color: #07132b;
}

.project-exp-view-item .item-content p {
    margin-top: 12px;
    color: #000;
    font-size: 14px;
    white-space: break-spaces;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 手动hover效果 */
.project-exp-view-item-inner {
    padding: 8px 16px;
    border-radius: 10px;
}

.project-exp-view-item-inner:hover {
    background-color: RGB(225, 229, 234);
}

.project-exp-view-item-inner:hover .item-header .item-action {
    display: block;
}

/* 教育经历 */
.edu-exp-container {
    padding: 8px 0 20px;
}

.edu-exp-view-item {
    padding: 16px 32px;
    position: relative;
}

.edu-exp-view-item .edu-exp-view-left {
    overflow: hidden;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-logo {
    width: 47px;
    height: 47px;
    background: #fff;
    float: left;
    border-radius: 4px;
    border: 1px solid #f6f8fb;
    overflow: hidden;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-logo img {
    width: 100%;
    height: 100%;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-content {
    float: left;
    padding-left: 8px;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-content .edu-name {
    color: #07132b;
    line-height: 20px;
    font-size: 14px;
    display: inline-block;
    max-width: 430px;
    vertical-align: middle;
    font-weight: 700;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-content .edu-time {
    display: inline-block;
    color: #666;
    line-height: 20px;
    font-size: 12px;
    margin-left: 16px;
    font-weight: 400;
    vertical-align: middle;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-content .edu-tag {
    color: #617185;
    line-height: 20px;
    margin: 8px 0 0;
    width: 550px;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-content .edu-tag span {
    font-size: 12px;
    margin-right: 8px;
    color: #ff6400;
    height: 17px;
    line-height: 17px;
    padding: 0 6px;
    background: #ffefe5;
    border-radius: 4px;
    display: inline-block;
}

.edu-exp-view-item .edu-exp-view-left .edu-view-content .edu-special {
    color: #617185;
    line-height: 20px;
    margin: 8px 0 0;
    width: 550px;
    font-size: 14px;
}

.edu-exp-view-item .edu-exp-view-right {
    position: absolute;
    right: 32px;
    top: 16px;
    display: none;
}





/* 简历侧边栏 */
.resume-container .user-sider {
    position: relative;
    width: 264px;
}

.sider-box {
    background: #fff;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    border-radius: 12px;
}

.sider-resume {
    position: relative;
    padding: 0;
}

.sider-resume .sider-title {
    position: relative;
    display: flex;
    align-items: center;
    height: auto;
    padding: 12px 24px;
    line-height: 22px;
    background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
    border-radius: 12px 12px 0 0;
}

.sider-box .sider-title {
    height: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    line-height: 20px;
    align-items: center;
    display: flex;
}

.sider-resume .sider-title .sider-title-operate {
    position: absolute;
    right: 14px;
    top: 50%;
    margin-top: -10px;
    z-index: 3;
    width: 20px;
    height: 20px;
    display: block;
    background: url(https://img.bosszhipin.com/static/file/2023/qirzlzjk2r1700550969709.png) 0 0 / 20px auto no-repeat;
    transition: none;
}

a,
a:hover {
    text-decoration: none;
}

a {
    color: #414a60;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.sider-resume .sider-title .operate-list {
    display: none;
    position: absolute;
    z-index: 1;
    top: 24px;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .08);
    border-radius: 8px;
    border: 1px solid #ededed;
    padding: 4px;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .sider-title .operate-list .operate-list-item {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .sider-title .operate-list .operate-item-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url(https://img.bosszhipin.com/static/file/2023/2dmysdl6np1700551943562.png) 0 0 / 18px auto no-repeat;
    margin-right: 8px;
}

.sider-resume .sider-title .operate-list .operate-list-item {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .sider-title .operate-list .operate-item-icon.operate-item-video {
    background-position: 0 -72px;
}

.sider-resume .sider-title .operate-list .operate-item-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url(https://img.bosszhipin.com/static/file/2023/2dmysdl6np1700551943562.png) 0 0 / 18px auto no-repeat;
    margin-right: 8px;
}

.sider-resume .sider-title .operate-list .operate-list-item {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .sider-title .operate-list .operate-item-icon.operate-item-create {
    background-position: 0 -108px;
}

.sider-resume .sider-title .operate-list .operate-item-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    background: url(https://img.bosszhipin.com/static/file/2023/2dmysdl6np1700551943562.png) 0 0 / 18px auto no-repeat;
    margin-right: 8px;
}

.sider-resume .resume-attachment .annex-list {
    margin: 8px 8px 0;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li {
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    transition: all .2s linear;
    padding: 8px 28px 8px 12px;
    cursor: pointer;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .annex-img {
    float: left;
    height: 44px;
    margin-right: 8px;
}

img {
    border: none;
}

img {
    border-style: none;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.sider-resume .resume-attachment .annex-list li .annex-item-operate {
    width: 16px;
    height: 16px;
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 8px;
    margin-top: -8px;
    background: url(https://img.bosszhipin.com/static/file/2023/i8geaegev11700556833829.png) 0 0 / 16px auto no-repeat;
    transition: none;
}

a,
a:hover {
    text-decoration: none;
}

a {
    color: #414a60;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list {
    display: none;
    position: absolute;
    z-index: 110;
    top: 24px;
    right: 0;
    background: #fff;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, .08);
    border-radius: 8px;
    border: 1px solid #ededed;
    padding: 4px;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list li {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

.sider-resume .resume-attachment .annex-list li {
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    transition: all .2s linear;
    padding: 8px 28px 8px 12px;
    cursor: pointer;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list li {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

.sider-resume .resume-attachment .annex-list li+li {
    margin-top: 4px;
}

.sider-resume .resume-attachment .annex-list li {
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    transition: all .2s linear;
    padding: 8px 28px 8px 12px;
    cursor: pointer;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .load-btn,
.sider-resume .resume-attachment .annex-list li .sync-btn {
    display: block;
    margin: -8px -12px;
    padding: 8px 12px;
    flex-grow: 1;
}

a,
a:hover {
    text-decoration: none;
}

a {
    color: #414a60;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list li {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

.sider-resume .resume-attachment .annex-list li+li {
    margin-top: 4px;
}

.sider-resume .resume-attachment .annex-list li {
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    transition: all .2s linear;
    padding: 8px 28px 8px 12px;
    cursor: pointer;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list li {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

.sider-resume .resume-attachment .annex-list li+li {
    margin-top: 4px;
}

.sider-resume .resume-attachment .annex-list li {
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    transition: all .2s linear;
    padding: 8px 28px 8px 12px;
    cursor: pointer;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list li {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

.sider-resume .resume-attachment .annex-list li+li {
    margin-top: 4px;
}

.sider-resume .resume-attachment .annex-list li {
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    transition: all .2s linear;
    padding: 8px 28px 8px 12px;
    cursor: pointer;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list li.annex-operate-delete {
    position: relative;
    margin-top: 4px;
}

.sider-resume .resume-attachment .annex-list li .annex-operate-list li {
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #222;
    font-weight: 400;
    line-height: 20px;
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    transition: all .2s linear;
}

.sider-resume .resume-attachment .annex-list li+li {
    margin-top: 4px;
}

.sider-resume .resume-attachment .annex-list li {
    position: relative;
    color: #333;
    font-size: 14px;
    border-radius: 8px;
    transition: all .2s linear;
    padding: 8px 28px 8px 12px;
    cursor: pointer;
}

li,
ol,
ul {
    list-style: none;
}

.sider-resume .resume-attachment .annex-list li .annex-content {
    margin-left: 50px;
}

.sider-resume .resume-attachment .annex-list li .annex-content .basis {
    line-height: 24px;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.sider-resume .resume-attachment .annex-list li .annex-content .basis a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a,
a:hover {
    text-decoration: none;
}

a {
    color: #414a60;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.sider-resume .resume-attachment .annex-list li .annex-content .basis span {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sider-resume .info-tag,
.sider-resume .warning-tag {
    display: inline-block;
    font-size: 12px;
    line-height: 17px;
    padding: 1px 6px;
    border-radius: 3px;
    margin-left: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sider-resume .warning-tag {
    color: #ff9d00;
    background: #fff3e5;
}

.sider-resume .resume-attachment .annex-list li .annex-content .desc {
    font-size: 12px;
    line-height: 17px;
    color: #8d92a1;
}

.clear,
.clearfix:after {
    display: block;
    visibility: hidden;
    clear: both;
}

.clearfix:after {
    content: "";
    overflow: hidden;
}

:after,
:before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.sider-box {
    background: #fff;
    padding: 20px;
    margin-bottom: 16px;
    position: relative;
    border-radius: 12px;
}

.resume-settings:before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 100%;
    height: 46px;
    background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
    border-radius: 12px 12px 0 0;
    z-index: 0;
}

:after,
:before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.resume-settings .sider-title {
    position: relative;
    margin-bottom: 12px;
}

.sider-box .sider-title {
    height: 20px;
    font-size: 16px;
    font-weight: 500;
    color: #222;
    line-height: 20px;
    align-items: center;
    display: flex;
}

.sider-box .sider-title em {
    font-style: normal;
    flex: 1;
}

.resume-settings .pull-right {
    font-size: 14px;
    color: #56cbc4;
}

a,
a:hover {
    text-decoration: none;
}

a {
    color: #414a60;
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects;
}

.resume-settings .setting-item {
    color: #414a60;
    padding: 15px 30px;
    margin: 0 -30px;
    line-height: 20px;
    position: relative;
}

.resume-settings .setting-item .pull-right {
    float: right;
    font-size: 13px;
    color: #9fa3af;
}

.resume-settings .pull-right {
    font-size: 14px;
    color: #56cbc4;
}

.resume-settings .setting-item:last-child {
    padding: 15px 30px;
    margin-bottom: -15px;
}

.resume-settings .setting-item+.setting-item {
    border-top: 1px solid #f3f3f3;
}

.resume-settings .setting-item {
    color: #414a60;
    padding: 15px 30px;
    margin: 0 -30px;
    line-height: 20px;
    position: relative;
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

.resume-settings .setting-item .pull-right {
    float: right;
    font-size: 13px;
    color: #9fa3af;
}

.resume-settings .pull-right {
    font-size: 14px;
    color: #56cbc4;
}

.resume-settings .text-green {
    color: #56cbc4;
}

/* 侧边栏样式 */

.sidebar {
    background-color: #f5f5f5;
    padding: 20px;
    width: 260px;
    transition: all .2s linear;
    border-radius: 12px;
    border: 1px solid #f3eded;
    box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, .08);
}

.sidebar-item {
    margin-bottom: 20px;
}

.sidebar-item-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;

}

.sidebar-item-content {
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
}

.sidebar-item-progress {
    margin-bottom: 10px;
}

.progress-bar {
    display: block;
    width: 100%;
    height: 10px;
    background-color: #e0e0e0;
    border-radius: 4px;
}

.progress-bar-inner {
    display: block;
    height: 100%;
    background-color: #FF6400;
    border-radius: 4px;
}

.progress-text {
    font-size: 12px;
    color: #666;
}

.sidebar-item-tip {
    font-size: 14px;
    color: #999;
}

.start-progress-btn {
    background-color: #ffae00;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.start-progress-btn:hover {
    background-color: #FF6400;
}

.start-progress-btn.disabled {
    background-color: #ccc;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: not-allowed;
}

.progress-textarea {
    width: 100%;
    border: 1px solid #8d8a80;
    border-radius: 4px;
    padding: 10px;
    resize: none;
    margin-bottom: 10px;
    background-color: #f0f391;
    text-decoration: underline #999593;
    color: gray;
    height: 0px;
    /* min-height: 500px; */
}

.textarea-item {
    margin-bottom: 10px;
    border: none;
    border-bottom: 1px solid #b0afaf;
    padding: 5px;
    background-color: transparent;
}

.num {
    position: absolute;
    font-family: PingFangSC-Regular, sans-serif;
    right: 50px;
    top: 0px;
    color: #fff;
    background: url(../../../assets/icons/tip3.svg) no-repeat;
    background-size: 70%;
    background-position: center;
    border-radius: 15px;
    text-align: center;
    line-height: 25px;
    width: 80px;
    height: 25px;
    font-size: 12px;
    overflow: hidden;
}

.white-line {
    animation: light-done 1s linear 0s infinite running;
    background: linear-gradient(90deg, hsla(0, 0%, 100%, 0.7), hsla(0, 0%, 100%, 0));
    bottom: 0px;
    left: 0px;
    position: absolute;
    top: 0px;
    transform: rotate(225deg);
    width: 10%;
}

@keyframes light-done {
    0% {
        left: 0;
    }

    100% {
        left: 100%;
    }
}
</style>
